<template>
  <div class="pages recharge">
    <div class="pageLevel">
      <!-- 头部 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <div class="content">
          <el-form-item>
            <el-button type="primary" @click="goBack()"> 返回</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-left:50px;">确定</el-button>
          </el-form-item>
          <el-form-item label="充值金额" prop="name">
            <input class="commonInput" v-model="value" @blur="blur(value)" size="mini" type="text">
            <!-- <el-input v-model="ruleForm.name" maxlength="8" style="width:30%;"></el-input> -->
            <span style="color:#606266;font-size:14px;margin-left:10px;">元</span>
            <div class="span2">最低充值金额为0.01元</div>
          </el-form-item>
        </div>
        <div class="content1">
          <div class="from_main infon">
            <div class="infon_text">
              <span class="infon_shu"></span>
              <span class="infon_text_t"> 选择充值方式</span>
            </div>
          </div>
          <div class="box1">
            <div class="choice" v-for="(item, index) in  Data" :key="index">
              <div class="choice-radio">
                <el-form-item>
                  <el-radio v-model="ruleForm.commod" :label="item.bindNo" @change="commods">{{nbsp}} </el-radio>
                </el-form-item>
              </div>
              <img :src="item.bankUrl" alt="">
              <div class="span1">{{item.bankName}}</div>
              <div class="span2">{{item.singleFeeMsg}},{{item.dayFee}}</div>
            </div>
          </div>
          <div class="box2">温馨提示：您可使用汇款充值方式，无手续费产生，查看<span class="span1" @click="routerPush('finance-rechargeDetails')">汇款充值流程</span></div>
        </div>
      </el-form>
    </div>
    <!-- <div class="pageLevel" v-else>
      <router-view></router-view>
    </div> -->
    <el-dialog title="充值验证码" :visible.sync="dialogFormVisible" width="576px" :closeOnClickModal='false' :closeOnPressEscape='false'>
      <el-form :model="form">
        <el-form-item >
                    <!-- :label-width="formLabelWidth" -->
          <span>短信验证码已发送至您的手机{{phone}}</span>
        </el-form-item>
        <el-form-item label="短信验证码">
          <el-row>
            <el-col :span="6">
              <el-input placeholder="验证码" size="small" maxlength="6" v-model="form.verify" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="clickCode">
                <el-button style="font-size:14px;margin-left: 50px;" v-if="codeMsg!='获取验证码'">{{countdowns+codeMsg}}</el-button>
                <el-button @click="getCode" style="font-size:14px;margin-left: 50px;" v-if="codeMsg=='获取验证码'">{{countdowns+codeMsg}}</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item >
          <!-- :label-width="formLabelWidth" -->
          <span> 该笔充值将产生{{fee}}元手续费（从账户中扣除）</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="rechargeValidate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import { routerTo } from "@/util";
import util from "@/util";
import { rechargeApplication, bankCardList, rechargeValidate } from "@/api";
export default {
  computed: mapState([
    "merchantId",
  ]),
  data() {
    return {
      nbsp:" ",
      singleFee: -1,
      phone: "",
      fee: "",
      bizSerialNumber: "",
      codeDisabled: false, // 是否禁用按钮
      countdowns: "", //验证码秒数
      timer: "",
      countdown: 120,
      codeMsg: "获取验证码", //按钮上的文字
      showTab: "",
      value: this.val,
      dialogFormVisible: false,
      form: {
        verify: ""
      },
      Data: [
        {
          bankName: "",
          cant: "",
          bankUrl: ""
        }
      ],
      ruleForm: {
        name: "111",
        commod: "",
        phone: "18810563078"
      },
      rules: {
        name: [{ required: true, message: "请输入打款金额", trigger: "blur" }]
      }
    };
  },
  watch: {
    val: function(val) {
      this.value = val;
    },
    value: function(val) {
      val = val.toString();
      let arr = val.split(".");
      let num = "";
      arr[0] = arr[0].replace(/[^0-9]/gi, "").substring(0, 8); // 去掉非数字&&保留8位
      if (arr[0] == "") {
        arr[0] = 0;
      }
      arr[0] = parseInt(arr[0]);
      if (arr.length > 1) {
        num = ".";
        num += arr[1].replace(/[^0-9]/gi, "").substring(0, 2);
      }
      this.value = arr[0] + num;
      this.$emit("update:val", this.value);
    },
    deep: true
  },
  mounted() {
    this.bankCardList(); //账号信息
  },
  methods: {
    // 获取验证码
    getCode() {
      if (this.ruleForm.commod == "") {
        this.$message({
          message: "请选择充值方式",
          center: true,
          duration: "3000"
        });
        return false;
      }
      if (this.value < 0.01) {
        this.$message({
          message: "最小充值金额为0.01元",
          duration: "3000"
        });
        return false;
      }
      if (this.value > this.singleFee && this.singleFee != -1) {
        this.value = this.singleFee;
      }
      // if (this.ruleForm.phone !== "" && this.checkMobile(this.ruleForm.phone)) {
      let data = {
        orgId: this.merchantId,
        payAmount: this.value,
        bindNo: this.ruleForm.commod,
        payType: "QUICKPAYMENT"
      };
      rechargeApplication(data).then(res => {
        if (res.code == "200") {
          this.$message({
            message: "已发送短信",
            center: true,
            duration: "1000"
          });
          this.phone = res.data.phone;
          this.bizSerialNumber = res.data.bizSerialNumber;
          this.fee = res.data.fee;
          this.phone = res.data.phone
            .toString()
            .replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
          this.dialogFormVisible = true;
          // 验证码120秒倒计时
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 120) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.codeMsg = "" + "重新获取";
                  this.countdowns = this.countdown + "S";
                } else {
                  clearInterval(this.timer);
                  this.codeMsg = "获取验证码";
                  this.countdowns = "";
                  this.countdown = 120;
                  this.timer = null;
                  this.codeDisabled = false;
                }
              }
            }, 1000);
          }
        } else {
          this.$message({
            message: res.data.msg,
            center: true,
            duration: "3000"
          });
        }
      });
      // } else {
      //   this.$message({
      //     message: "请输入正确的手机号",
      //     duration: "3000"
      //   });
      // }
    },
    bankCardList() {
      let data = {
        orgId: this.merchantId
      };
      bankCardList(data).then(res => {
        this.Data = res.data.list;
      });
    },
    rechargeValidate() {
      if (this.form.verify == "" || this.form.verify == "123456") {
        this.$message({
          message: "验证码格式不正确",
          center: true,
          duration: "3000"
        });
        return false;
      }
      ///充值验证
      let data = {
        orgId: this.merchantId,
        bizSerialNumber: this.bizSerialNumber,
        bindNo: this.ruleForm.commod,
        validateCode: this.form.verify
      };
      rechargeValidate(data).then(res => {
        this.dialogFormVisible = false;
        if (res.data.smsState == "1") {
          this.$store.commit("SETISRELOADDATA", true);
          util.routerTo("/financial-center/account-center/finance-account");
        }
      });
    },
    // rechargeApplication() {
    //   ///充值申请
    //   let data = {
    //     orgId: this.merchantId,
    //     payAmount: this.value,
    //     bindNo: this.ruleForm.commod,
    //     payType: "QUICKPAYMENT"
    //   };
    //   rechargeApplication(data).then(res => {
    //     this.phone = res.data.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    //     this.bizSerialNumber = res.data.bizSerialNumber;
    //     this.fee = res.data.fee;
    //   });
    // },
   routerPush(name) {
     util.routerTo(name,{
              
          })
    },
    commods(row) {
      console.log(row);
      for (let i = 0; i < this.Data.length; i++) {
        if (row == this.Data[i].bindNo) {
          this.singleFee = this.Data[i].singleFee;
          console.log(this.singleFee);
        }
      }
    },
    submitForm(formName) {
      // console.log(this.value);
      if (this.value == undefined) {
        this.$message({
          message: "请输入打款金额",
          duration: "3000"
        });
      } else {
        this.getCode(); //提交获取验证码
        // console.log(this.value);
      }
    },
    blur(val) {
      if (val.substr(val.length - 1, 1) == ".") {
        this.value = this.value.substr(0, this.value.length - 1);
      }
    },
    goBack() {
      history.back();
    }
  }
};
</script>
<style scoped>
.content {
  width: 800px;
  margin: 20px 0 0 30px;
}
.content .box1 {
  float: left;
  color: #606266;
  font-size: 16px;
  margin: 50px 0 30px 30px;
}
.content .span2 {
  position: absolute;
  left: 270px;
  top: 0px;
  color: #c0c4cc;
  width: 252px;
}
.commonInput {
  height: 27px;
  width: 210px;
}
.choice {
  width: 200px;
  height: 68px;
  position: relative;
  float: left;
  border: 1px #c0c4cc solid;
  border-radius: 10px;
  margin: 20px 20px 20px 30px;
}
.choice .choice-radio {
  width: 30px;
  height: 20px;
  position: absolute;
  left: -35px;
  top: 16px;
}
.choice img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 10px;
}
.choice .span1 {
  color: #606266;
  z-index: 10;
  height: 30px;
  font-size: 12px;
  position: absolute;
  left: 70px;
  top: 15px;
}
.choice .span2 {
  font-size: 10px;
  color: #606266;
  position: absolute;
  left: 70px;
  top: 35px;
}
.box1 {
  float: left;
  width: 1100px;
  margin: 50px 0 0 100px;
}
.box2 {
  float: left;
  width: 1100px;
  color: #606266;
  font-size: 16px;
  margin: 50px 0 30px 100px;
}
.box2 .span1 {
  color: #409eff;
  width: 100px;
  height: 21px;
}
.box2 .span1:hover {
  cursor: pointer;
}
</style>
<style>
.choice .choice-radio .el-form-item__content {
  margin-left: 0 !important;
}
</style>

